<template>
    <div class="upload-img">
        <el-upload action="#" list-type="picture-card" :file-list="fileList" :on-preview="preview" :on-remove="remove"
            :before-upload="beforeUpload" :http-request="upload" :class="fileList.length === 1 ? 'iconPlus' : ''">
            <i class="el-icon-plus"></i>
        </el-upload>
        <el-progress v-show="showProgress" :percentage="percent" style="width: 180px;"></el-progress>
        <el-dialog :visible.sync="dialogVisible" title="预览图片">
            <img width="100%" :src="imageUrl" alt="">
        </el-dialog>
    </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 引入腾讯云COS包
// 实例化COS对象
const cos = new COS({
    SecretId: 'AKIDjO3ZyIbkqvW2R1c9e9nIh7Y9FIMT9pPp', // 身份识别 ID
    SecretKey: 'IsKj3KVcgo3GPDuU1U6lR5f7RgooJKbt', // 身份密钥
})

export default {
    name: 'UploadImg',
    data() {
        return {
            fileList: [], // 上传的文件列表
            dialogVisible: false, // 控制预览弹层显示
            imageUrl: '', // 图片地址
            showProgress: false, // 控制上传进度条显示
            percent: 0 // 进度条实时长度
        }
    },
    methods: {
        // 预览图片
        preview(file) {
            this.imageUrl = file.url;
            this.dialogVisible = true;
        },
        // 移除图片(参数fileList为移除后的最新文件列表)
        remove(file, fileList) {
            this.fileList = fileList
        },
        // 上传之前的处理
        beforeUpload(file) {
            const isImg = /\.(jpg|jpeg|gif|bmp|png)$/.test(file.name)
            const isLt5M = file.size / 1024 / 1024 < 5;
            if (!isImg) {
                this.$message.error('只能上传JPG、JPEG、GIF、BMP、PNG格式！')
            }
            if (!isLt5M) {
                this.$message.error('上传图片大小不能超过 5MB!')
            }
            return isImg && isLt5M
        },
        // 上传图片
        upload(params) {
            const file = params.file

            // 显示进度条，并设上{ url: '', upload: false} 表示文件还没上传成功
            this.showProgress = true
            this.fileList = [{ url: '', upload: false}]
            // 简单上传文件
            cos.putObject({
                Bucket: 'hr-management-1320362600', /* 填入您自己的存储桶，必须字段 */
                Region: 'ap-beijing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
                Key: file.uid+'-'+file.name,  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
                Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
                onProgress: (progressData) => { /* 上传进度 */
                    this.percent = progressData.percent * 100
                }
            }, (err, data) => {
                // console.log(err || data)
                if (!err && data.statusCode === 200) {
                    // 如果上传成功, 给url赋上地址值，并将upload: true作为上传成功的标志
                    this.fileList = [{ url: 'http://' + data.Location, upload: true}]
                    setTimeout(() => {
                        // 关闭进度条
                        this.showProgress = false
                        this.percent = 0
                    }, 1000)
                }
            })
        }
    }
}
</script>

<style lang="scss">
.upload-img {
    .iconPlus {
        .el-upload--picture-card {
            display: none;
        }
    }
    // 去除图片上传，移除时的动画效果，可以避免闪动问题
    .el-upload-list__item {
        transition: none !important;
    }
}
</style>